<template>
  <div>
    <m-header></m-header>
    <div class="content-wrap">
      <div class="content">
        <div class="left">
          <!-- <p class="title">{{ liveData.title }}</p> -->
          <video
            class="video"
            autoplay
            muted
            controls
            width="95%"
            height="500"
            id="videoElement"
          ></video>
        </div>
        <div class="right">
          <p class="title">{{liveData.title}}</p>
          <p class="brief">
            {{liveData.introduction}}
          </p>
          <p class="title">直播聊天室</p>
          <div class="chatList" ref="chatList">
            <div class="item" v-for="(item,index) in messageList" :key="item.index">
              <span class="username">{{item.username}}</span>
              <span>：</span>
              <span>{{item.message}}</span>
            </div>
          </div>
          <div class="input">
            <Input
              v-model="message"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入聊天内容"
            />
            <div class="btn">
              <Button @click="sendMsg" type="primary">发送</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { getSession, setSession } from "@/utils";
import socket from "@/plugins/socketIO";

import mHeader from "@/components/header.vue";
import bottom from "@/components/bottom.vue";
import flvjs from "flv.js";

export default {
  components: {
    mHeader,
    bottom,
  },
  data() {
    return {
      liveData: {},
      message:"",
      userInfo:"",
      messageList:[]
    };
  },
  watch: {
    messageList(newVal, oldVal) {
      this.$nextTick(() => {
        this.$refs.chatList.scrollTop = this.$refs.chatList.scrollHeight;
      });
    },
  },
  created() {
    let userInfo = getSession('userInfo')
    this.userInfo = userInfo
    this.joinRoom();
  },
  mounted() {
    this.$nextTick(() => {
      let { id } = this.$route.query;
      setTimeout(id => {
        this.createVideo(id)
      }, 1000,id);
    });
  },
  methods: {
    createVideo(id) {
      this.HttpService.getLiveInfo({ id: id }).then((res) => {
        console.log(res);
        this.liveData = res.data;
        if (flvjs.isSupported()) {
          let url = "http://localhost:8000/live/" + res.data.code + ".flv";
          var videoElement = document.getElementById("videoElement");
          var flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: url, //你的url地址
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
        }
        // socket
        let isDoctor = getSession("isDoctor");
        if (isDoctor) {
          // 为了方便这里暂且使用 socket 推送正在直播的房间
          setInterval(() => {
            socket.emit("living", {
              data: res.data,
            });
          }, 5000);
        }
      });
    },
    joinRoom(){
      let { username } = getSession('userInfo')
      console.log(username);
      socket.emit("joinRoom",{
        name:'myRoom',
        username:username
      })
      // 暂略
      socket.on("someBodyJoinedIn",data => {
        console.log('someBodyJoinedIn',data);
        let map = data.username + '进入了聊天室'
      })
      socket.on("transmitRoomMsg",data => {
        console.log('收到消息',data);
        this.messageList.push(data);
        this.$refs.chatList.scrollTop = this.$refs.chatList.scrollHeight;
      })
    },
    sendMsg(){
      let { username } = this.userInfo
      socket.emit("sendRoomMsg",{
        username: username,
        message: this.message
      })
      this.message = ''
    }
  },
};
</script>

<style lang='less' scoped>
.content {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.left {
  width: 73%;
  height: 600px;
  background-color: #fff;
  text-align: center;
  .title {
    text-align: center;
    font-size: 25px;
    margin-top: 15px;
  }
}
.right {
  width: 25%;
  min-height: 600px;
  background-color: #fff;
  padding: 0px 15px;
  position: relative;
  .title {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    margin-top: 15px;
  }
  .chatList{
    // border: 1px solid #eee;
    height: 240px;
    max-height: 240px;
    overflow-y: scroll;
    position: relative;
    .item{
      margin-bottom: 5px;
      .username{
        color:#aaa;
      }
    }
  }
  .input{
    margin: 10px 0px;
  }
  .btn{
    position: absolute;
    right:10px;
    bottom:20px
  }
}
</style>
